import { Form, Space } from 'antd'
import { isValidElement, lazy } from 'react'

/**
 * @typedef {'AutoComplete' |
 * 'Input' |
 * 'InputSearch' |
 * 'InputPassword' |
 * 'InputGroup' |
 * 'TextArea' |
 * 'InputNumber' |
 * 'Switch' |
 * 'Radio' |
 * 'RadioGroup' |
 * 'Checkbox' |
 * 'CheckboxGroup' |
 * 'TimePicker' |
 * 'DatePicker' |
 * 'RangePicker' |
 * 'Cascader' |
 * 'Select' |
 * 'TreeSelect' |
 * 'Tree' |
 * 'AekSelect' |
 * 'AekTreeSelect' |
 * 'AekInputNumber' |
 * 'AekUpload' |
 * 'AekTextArea' |
 * 'AekCascader'
 * } ComponentNameProps
 */

const strComponent = {
  AutoComplete: lazy(() => import('antd/es/auto-complete')),
  Input: lazy(() => import('antd/es/input')),
  InputSearch: lazy(() => import('antd/es/input/Search')), // Input.Search,
  InputPassword: lazy(() => import('antd/es/input/Password')), // Input.Password,
  InputGroup: lazy(() => import('antd/es/input/Group')), // Input.Group,
  TextArea: lazy(() => import('antd/es/input/TextArea')),
  InputNumber: lazy(() => import('antd/es/input-number')),
  Switch: lazy(() => import('antd/es/switch')),
  Radio: lazy(() => import('antd/es/radio')),
  RadioGroup: lazy(() => import('antd/es/radio/group')), // Radio.Group,
  Checkbox: lazy(() => import('antd/es/checkbox')),
  CheckboxGroup: lazy(() => import('antd/es/checkbox/Group')), // Checkbox.Group,
  TimePicker: lazy(() => import('antd/es/time-picker')),
  DatePicker: lazy(() => import('antd/es/date-picker')),
  RangePicker: lazy(() => import('../RangePicker')), // DatePicker.RangePicker,
  Cascader: lazy(() => import('antd/es/cascader')),
  Select: lazy(() => import('antd/es/select')),
  TreeSelect: lazy(() => import('antd/es/tree-select')),
  Tree: lazy(() => import('antd/es/tree')),
  AekSelect: lazy(() => import('../AekSelect')),
  AekTreeSelect: lazy(() => import('../AekTreeSelect')),
  AekInputNumber: lazy(() => import('../AekInputNumber')),
  AekUpload: lazy(() => import('../AekUpload')),
  AekTextArea: lazy(() => import('../AekTextArea')),
  AekCascader: lazy(() => import('../AekCascader')),
}

const getComponent = (component, key = '0') => {
  if (isValidElement(component) || typeof component === 'string') {
    return component
  }
  if (Array.isArray(component)) {
    return (
      <Space.Compact style={{ width: '100%' }}>
        {component
          .filter(item => !item.exclude)
          .map((item, index) => (
            <Form.Item
              key={`${key}-${index}`}
              style={{
                width: item.component?.props?.width,
                flex: item.component?.props?.width ? 'unset' : 1,
                marginBottom: 0,
                ...item.style,
              }}
              {...{ name: item.field, ...item.formItemProps }}
            >
              {getComponent(item.component, `${key}-${index}`)}
            </Form.Item>
          ))}
      </Space.Compact>
    )
  } else if (typeof component === 'object') {
    const { name, props = {}, children } = component
    const Component = strComponent[name]
    const compChild = children
    if (Array.isArray(compChild) && compChild.length) {
      const childrenItem = compChild.map((item, index) => getComponent(item, `${key}-${index}`))
      return (
        <Component {...props} key={`${key}-0`}>
          {childrenItem}
        </Component>
      )
    }
    return <Component {...props} key={`${key}-0`} />
  }
  throw component
}

export default getComponent
